<template>
	<view class="layout flex-column">
		<view class="header">
			<view class="flex-column content">
				<text class="number">222</text>
				<text class="desc">做题数</text>
			</view>

			<view class="flex-column content">
				<text class="number">11%</text>
				<text class="desc">正确率</text>
			</view>

			<view class="flex-column content">
				<text class="number">200</text>
				<text class="desc">错题总数</text>
			</view>
		</view>

		<view class="flex-1 overflow-hidden">
			<z-paging ref="paging" :fixed="false" v-model="list" @query="queryList" class="container">
				<view v-for="(item,index) in list" :key="item.id" class="content flex-row">
					<text class="row">{{index+1}}</text>
					<text class="title">{{item.title}}</text>
				</view>
			</z-paging>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const paging = ref(null)

	const list = ref([{
			'id': '1',
			'title': '第一章节'
		},
		{
			'id': '2',
			'title': '第二章节'
		},

		{
			'id': '3',
			'title': '第三章节'
		}
	])

	// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
	const queryList = (pageNo, pageSize) => {
		paging.value.complete(list.value);
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: white;
	}
</style>

<style lang="scss" scoped>
	.layout {
		width: 100%;
		height: 100%;

		.header {
			display: grid;
			gap: 0;
			height: 200rpx;
			grid-template-columns: repeat(3, 1fr);

			.content {
				justify-content: center;
				align-items: center;
				background-color: white;

				.number {
					font-size: 36rpx;
					color: $me-color-blue;
				}

				.desc {
					margin-top: 36rpx;
					font-size: 28rpx;
					color: $me-color-gray-1;
				}
			}

		}

		.container {
			margin-top: 10rpx;
			background-color: white;

			.content {
				margin: 28rpx 30rpx 0;
				padding: 26rpx 20rpx;
				background-color: $me-color-background;
				border-radius: 8rpx;

				.row {
					font-size: 28rpx;
					color: $me-color-gray-6;
				}

				.title {
					font-size: 28rpx;
					color: $me-color-gray-1;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>